<template>
  <div>
    <view-table
      need-login
      title="纳税评级"
      api-view="getDetailOperateTaxlevel"
      api-res-key="taxLevel"
      :usci="usci"
      :columns="taxLevelColumn"
    ></view-table>

    <view-table
      need-login
      title="纳税缴交信息"
      api-view="getDetailOperateTaxpayinfo"
      api-res-key="taxPayInfo"
      :usci="usci"
      :columns="taxPayColumn"
      @get-data="onGetTaxPayData"
    ></view-table>

    <el-echarts :width="1092" :height="280" :option="taxPayChartOptions"></el-echarts>

    <view-table
      need-login
      title="发票开票信息"
      api-view="getDetailOperateInvoice"
      api-res-key="invoice"
      :usci="usci"
      :columns="invoiceColumn"
      @get-data="onGetInvoiceData"
    ></view-table>

    <el-echarts :width="1092" :height="280" :option="invoiceChartOptions"></el-echarts>

    <view-table
      need-login
      title="社保缴交信息"
      api-view="getDetailOperateSocialpay"
      api-res-key="socialPay"
      :usci="usci"
      :columns="socialPayColumn"
    ></view-table>

    <view-table
      need-login
      title="公积金缴交信息"
      api-view="getDetailOperatePublicfundspay"
      api-res-key="publicFundsPay"
      :usci="usci"
      :columns="publicFundsPayColumn"
    ></view-table>

    <view-table
      need-login
      title="水费缴交信息"
      api-view="getDetailOperateWaterfeepay"
      api-res-key="waterFeePay"
      :usci="usci"
      :columns="waterFeePayColumn"
    ></view-table>

    <view-table
      need-login
      title="电费缴交信息"
      api-view="getDetailOperateElefeepay"
      api-res-key="eleFeePay"
      :usci="usci"
      :columns="eleFeePayColumn"
    ></view-table>

    <view-table
      need-login
      title="煤气费缴交信息"
      api-view="getDetailOperateAirfeepay"
      api-res-key="airFeePay"
      :usci="usci"
      :columns="airFeePayColumn"
    ></view-table>
  </div>
</template>

<script>
import ViewTable from '@/credit/views/county/finance/components/ViewTable.vue'

export default {
  components: {
    ViewTable,
  },
  props: {
    baseInfo: {
      type: Object,
      default: () => ({}),
    },
  },
  data() {
    return {
      taxLevelColumn: [
        { label: '年度', prop: 'ND' },
        { label: '纳税评级', prop: 'BNPJ' },
      ],

      taxPayColumn: [
        { label: '统计年份', prop: 'TJNF' },
        { label: '月份', prop: 'YF' },
        { label: '项目', prop: 'XM' },
        { label: '税率', prop: 'SL' },
        { label: '应纳税额（万）', prop: 'YNSEW' },
      ],

      invoiceColumn: [
        { label: '统计年份', prop: 'TJNF' },
        { label: '月份', prop: 'YF' },
        { label: '票量（张）', prop: 'PLZ' },
        { label: '月度开票总金额（万元）', prop: 'YDKPZJEWY' },
      ],

      socialPayColumn: [
        { label: '年度', prop: 'ND' },
        { label: '缴存年月', prop: 'JCNY' },
        { label: '存缴人数', prop: 'CJRS' },
        { label: '单位月缴存额（万）', prop: 'DWYJCEW' },
        { label: '单位人均月缴存额（元）', prop: 'DWRJYJCEY' },
      ],

      publicFundsPayColumn: [
        { label: '年度', prop: 'ND' },
        { label: '缴存年月', prop: 'JCNY' },
        { label: '存缴人数', prop: 'CJRS' },
        { label: '单位月缴存额（万）', prop: 'DWYJCEW' },
        { label: '单位人均月缴存额（元）', prop: 'DWYRJJCEY' },
        { label: '状态', prop: 'ZT' },
      ],

      waterFeePayColumn: [
        { label: '年度', prop: 'ND' },
        { label: '缴存年月', prop: 'JCNY' },
        { label: '月度水费缴交金额（万）', prop: 'YDSFJJJEW' },
      ],

      eleFeePayColumn: [
        { label: '年度', prop: 'ND' },
        { label: '缴存年月', prop: 'JCNY' },
        { label: '月度电费缴交金额（万）', prop: 'YDDFJJJEW' },
      ],

      airFeePayColumn: [
        { label: '年度', prop: 'ND' },
        { label: '缴存年月', prop: 'JCNY' },
        { label: '月度煤气费缴交金额（万）', prop: 'YDMQFJJJEW' },
      ],

      taxPayChartOptions: {},
      invoiceChartOptions: {},
    }
  },
  computed: {
    usci() {
      return this.baseInfo.TYSHXYDM
    },
  },
  watch: {},
  created() {},
  mounted() {},
  methods: {
    onGetTaxPayData(res) {
      const data = res.data || []
      this.taxPayChartOptions = this.getLineChartOption({
        title: '纳税缴交信息',
        legend: '应纳税额',
        xData: data.map(it => `${it.TJNF || ''}-${it.YF || ''}`),
        yData: data.map(it => it.YNSEW ?? void 0),
      })
    },
    onGetInvoiceData(res) {
      const data = res.data || []
      const dataMap = {}

      // 按年统计
      for (const d of data) {
        if (!d.TJNF) continue

        const n = !d.YDKPZJEWY && d.YDKPZJEWY !== 0 ? void 0 : +d.YDKPZJEWY
        let t = dataMap[d.TJNF]

        if (t && n) {
          t += n
        }

        dataMap[d.TJNF] = t
      }

      const xData = []
      const yData = []

      for (const key in dataMap) {
        xData.push(key)
        yData.push(dataMap[key])
      }

      this.invoiceChartOptions = this.getLineChartOption({
        title: '年度开票总额',
        legend: '总额',
        xData,
        yData,
      })
    },
    getLineChartOption(params) {
      const options = {
        backgroundColor: '#f5fbff',
        title: {
          text: params.title,
          left: 'center',
          top: 10,
          textStyle: {
            fontSize: 16,
          },
        },
        tooltip: {
          show: true,
          trigger: 'axis',
        },
        legend: {
          show: true,
          data: [params.legend],
          bottom: 10,
        },
        xAxis: {
          type: 'category',
          data: params.xData,
        },
        yAxis: {
          type: 'value',
        },
        series: [
          {
            name: params.legend,
            data: params.yData,
            type: 'line',
            smooth: true,
          },
        ],
      }

      return options
    },
  },
}
</script>

<style lang="scss" scoped></style>
